<!--
- Author:  LiShibin.
- Date:    2018/10/30.
- File:    detail.vue.
-->
<template>
  <div>
    <div class="Web_Box">
      <div class="Topmenu"><i @click="back" class="iconfont icon-youjiantou"></i>
        <h1>商品详情</h1>
        <span style="margin-right: 30px"><i @click="goCart" class="iconfont icon-gouwuche"></i></span>
      </div>
      <!--<div style="position: fixed; z-index: 2;width: 100%">-->
        <!--<i class="TransparentBut TransparentReturn iconfont icon-leftdot" @click="back"></i>-->
        <!--<router-link :to="{name: 'cart-list'}">-->
          <!--<i class="TransparentBut TransparentList iconfont icon-shoppingcart"></i>-->
        <!--</router-link>-->
        <!--<i class="TransparentBut TransparentCollection iconfont icon-collection" :class="{'collected': goodsInfo.fav_state == 1}" @click="switchCollect"></i>-->
      <!--</div>-->
      <div style="margin-top:50px;" class="CommodityDetails hidden">
        <div style="position: relative;">
          <mt-swipe :auto="3000" class="swiper-container bg_fff" @change="handleSwipeChange">
            <!--<mt-swipe-item class="swiper-slide" v-for="(item,index) in goodsInfo.showimage" :key="index">-->
              <mt-swipe-item class="swiper-slide" v-for="(item,index) in goodsInfo.image_list" :key="index">
              <div class="swiper-slide">
                <!--<img class="swipe-img" style="width: 100%" :src="$config.website + $config.goodsImgSrc + item" alt=""/>-->
                <img class="swipe-img" style="width: 100%" :src="$config.website + '/test.php?sign=' + index + '&image=' + item" alt=""/>
              </div>
            </mt-swipe-item>
          </mt-swipe>

          <div class="jinpaiyouhui">
            <p class="fl ">
              ￥{{goodsInfo.partner_price}}
            <div class="fl details polf"> <i class="iconfont icon-jiagedise jiagediseicon1 "></i><span class="jiagedise1">合伙人价</span></div>
              <span class="sj" @click="goUpgradeVip">立即升级</span>
            </p>
          </div>
        </div>
        <!--活动-->
        <!--<div class="active_box" v-if="goodsInfo.groupbuy_info">-->
          <!--<div class="active_cont f-cb">-->
            <!--<div class="text">-->
              <!--<p class="slh w5rem">{{goodsInfo.groupbuy_info.groupbuy_name}}</p>-->
              <!--<p class="f12" v-if="goodsInfo.groupbuy_info.upper_limit > 0">仅限购{{goodsInfo.groupbuy_info.upper_limit}}件</p>-->
            <!--</div>-->
            <!--<div class="disib vm daojishi fr " v-if="goodsInfo.groupbuy_info.type == 1">-->
              <!--<p class="f12 pb5">距结束仅剩</p>-->
              <!--<span class="timem disib vm">{{timeRemain.days}}</span><span class=" disib vm">&nbsp;天&nbsp;</span><span class="timem disib vm">{{timeRemain.hours}}</span><span class=" disib vm">&nbsp;时&nbsp;</span><span class="timem disib vm">{{timeRemain.minutes}}</span><span class="disib vm">&nbsp;分&nbsp;</span><span class="timem disib vm">{{timeRemain.seconds}}</span><span class="disib vm">&nbsp;秒&nbsp;</span>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
        <!--活动 end-->
        <div class="Details_pinpai">

          <div class="Details_kucun">
            <i class="iconfont icon-xiangqing_kucun1"></i> 库存数量：{{goodsInfo.goods_storage}}
          </div>

          <div v-if="goodsInfo.brand && goodsInfo.brand.brand_id" class="Details_name">
            <span class="pptp">
              <img :src="goodsInfo.brand.brand_pic" alt="">
            </span>
            <span>{{goodsInfo.brand.brand_name}}</span>
          </div>
          <p class="spname">{{goodsInfo.goods_name}}</p>

          <div class="f-oh ">
            <p class="jiage fl">{{goodsInfo.goods_price}}</p>
            <div class="fl details polf"> <i class="iconfont icon-jiagedise-duan jiagediseicon2"></i><span class="jiagedise2">淘只价</span></div>
          </div>

          <div class="Details_jiage">
            <p class="gongjia">参考公价：<span style="font-size: 13px">{{goodsInfo.goods_marketprice}}</span></p>
          </div>
          <!--<div v-if="!memberInfo.level || memberInfo.level == '0'" class="jinpaiyouhui">-->
            <!--<p><span class="tiyanjinpai">普通会员</span>-->
              <!--成为金牌可享受优惠价-->
              <!--<span @click="goUpgradeVip" class="sj">升级合伙人</span></p>-->
          <!--</div>-->
        </div>
        <!--<div class="Details_baozhang">-->
          <!--<div class="renzheng"><span style="float: left;height: 1rem;display: block;line-height: 1rem; ">平台认证：</span>-->
            <!--<p><span><img src="res1/wap/images/demo/诚信企业@2x.png" alt=""></span></p>-->
            <!--<p><span><img src="res1/wap/images/demo/央视上榜品牌@2x.png" alt=""></span></p>-->
          <!--</div>-->
          <!--<div class="baozhang">服务保障：-->
            <!--<span>正品保障</span>-->
            <!--<span>包邮</span>-->
            <!--<span>假一赔三</span>-->
          <!--</div>-->
        <!--</div>-->
        <div @click="goGoodsList" v-if="goodsInfo.brand && goodsInfo.brand.brand_id" class="zaishou">
          <div class="zaishou_img">
            <img :src="goodsInfo.brand.brand_pic" alt="">
          </div>
          <div class="dszt">
            <p class="hczt">{{goodsInfo.brand.brand_name}}</p>
            {{goodsInfo.brand.storage}}件商品在售
          </div>
          <i class="iconfont icon-youjiantou-copy"></i>
        </div>
        <div class="zaishou" style="height: 40px;padding:0px 0;box-shadow:0px 1px 6px 0px rgba(0,0,0,0.08);">
          <ul style="margin-top: 5px">
            <li :class="{'on': this.sign == 0}" @click="changeType(0)">商品描述</li>
            <li :class="{'on': this.sign == 1}" @click="changeType(1)">品牌故事</li>
            <li :class="{'on': this.sign == 2}" @click="changeType(2)">图文详情</li>
            <li :class="{'on': this.sign == 3}" @click="changeType(3)">交易流程</li>
          </ul>
        </div>
        <div style="padding:0px 0;width: 100%;" v-show="sign == 0">
          <div v-show="goodsInfo && goodsInfo.spec_list" class="params-cont">
            <h4>商品描述</h4>
            <div v-for="item in goodsInfo.spec_list" class="param-line">
              <span class="line-head">{{item.sp_name}}</span>
              <span class="line-cont">{{item.sp_value_name}}</span>
            </div>
            <div v-if="goodsInfo.special_value && goodsInfo.special_value.length>0" class="param-line">
              <span class="line-head">复杂功能</span>
              <span class="line-cont">{{goodsInfo.special_value.join(' / ')}}</span>
            </div>
            <div class="param-line">
              <span class="line-head">备注</span>
              <span class="line-cont">{{goodsInfo.mark}}</span>
            </div>
          </div>
          <div v-if="goodsInfo.image_list && goodsInfo.image_list.length > 0">
            <h4 style="font-size: 15px;line-height: 1.5rem;color: #333;padding: 10px">商品详情</h4>
            <img v-for="(item, index) in goodsInfo.image_list" :src="$config.website + '/test.php?sign=' + index + '&image=' + item" style="width: 100%;height: auto;">
          </div>
          <div style="padding: 0.5rem 0;text-align: center" v-else>
            暂时没有详情介绍
          </div>
        </div>
        <div class="zaishou" style="padding:10px 0;width: 100%; border-bottom: 1px solid #e6e7e7;" v-show="sign != 0">
          <!--<p class="zaishou_ms">商品描述</p>-->
          <!--<img src="../../assets/images/ms.png" alt="" style="width:100%;">-->
          <p class="zaishou_ms"  v-show="sign == 1">品牌故事</p>
          <img :src="$config.website + $config.adBrandImgSrc + goodsInfo.brand.story_image" alt="" style="width:100%;"  v-show="sign == 1">
          <p class="zaishou_ms" v-show="sign == 2">图文详情</p>
          <div style="width:100%;" v-show="sign == 2" v-html="goodsInfo.bodys" class="bodys_id"></div>
          <p class="zaishou_ms" v-show="sign == 3">交易流程</p>
          <img src="../../assets/images/lc.jpg" alt="" style="width:100%;" v-show="sign == 3">
          <img src="../../assets/images/recycle.jpg" alt="" style="width:100%;" v-show="sign == 3">
        </div>
        <!--商品基础信息Start-->
        <!--<div class="BasicInfo">-->
          <!--<div class="pl20 pr20 hidden">-->
            <!--<p class="Price">-->
              <!--<span class="PresentPrice">￥{{goodsInfo.goods_price | discount(goodsInfo.groupbuy_rebate)}}</span><span class="OriginalPrice">￥{{goodsInfo.goods_marketprice}}</span>-->
              <!--<span class="fr remind " v-show="storageRequested && storage <= 0" @click="switchArriveModelShow(true)">到货提醒</span><span class="fr remind2 disn">已设置提醒</span>-->
            <!--</p>-->
            <!--<h1 class="slh2">{{goodsInfo.goods_name}} <span v-show="goodsInfo.goods_unit" style="color:#b5b5b6;font-size: 0.6rem">{{parseInt(goodsInfo.goods_weight)}}克/{{goodsInfo.goods_unit | goodsUnitTxt}}</span>-->
            <!--</h1>-->
            <!--<div class="detail_text f24">{{goodsInfo.goods_jingle}}</div>-->
          <!--</div>-->
        <!--</div>-->
        <!--商品基础信息End-->
        <!--<p class="Freight mt10 mb10"><span class="cr_595757">运费：中国大陆地区包邮；港澳台，及境外请联系客服</span></p>-->

        <!--视频Start-->
        <!--<div class="video_block bg_fff" v-show="goodsInfo.youku_url" style="margin: 0 auto; text-align: center; padding: 0.5rem" v-html="resetIframWH($utils.HTMLDecode(goodsInfo.youku_url))">-->
        <!--</div>-->
        <!--视频End-->
        <!--商品评价Start-->
        <!--<div class="CommodityEvaluation mt20 bor_b_dcdddd">-->
          <!--<div class="tit">-->
            <!--<h2>商品评价 ({{goodsCommentCount}})</h2>-->
            <!--<div class="data disn">好评率<span class="cr_ff5c36">100%</span></div>-->
          <!--</div>-->
          <!--<div class="CommentList" v-show="goodsComment.data.length > 0">-->
            <!--<ul>-->
              <!--<li v-for="item in goodsComment.data" v-show="item.geval_state == 0 || item.geval_frommemberid == memberInfo.member_id">-->
                <!--<div class="user">-->
                  <!--<div class="pic"><img :src="$config.website + $config.avatarSrc + item.member_avatar" alt=""/></div>-->
                  <!--<span>{{item.member_name}}</span></div>-->
                <!--<p class="text">{{item.geval_content}}</p>-->
                <!--<p class="date">{{item.geval_addtime}}</p>-->
              <!--</li>-->
            <!--</ul>-->
            <!--<div class="more" @click="gotoCommentList">查看更多评价</div>-->
          <!--</div>-->
        <!--</div>-->
        <!--商品评价End-->
        <!--上拉Start-->
        <!--<div class="DetailsEntry">图文详情</div>-->
        <!--上拉End-->
        <!--商品详情Start-->

        <!--商品详情End-->

      </div>
    </div>
    <div class="PurchaseOperation gd">
      <div class="zaishou">
        <div class="Details_twobtn">
          <ul>
            <li @click="openShare"><i class="iconfont icon-xiangqing_tuwentuiguang"></i>
              <p>一键分享</p>
            </li>
            <li @click="gotoService"><i class="iconfont icon-kefu1"></i>
              <p>客服</p>
            </li>
          </ul>
        </div>
        <div class="zaishou_btn">
          <span @click="buyClick(1)" class="lm">立即购买</span>
          <span @click="buyClick(0)" class="em">加入购物车</span>
        </div>
      </div>
      <!--<button type="button" class="but bg_c3d600" @click="buyClick(0)">加入购物车</button>-->
      <!--<button type="button" class="but bg_45a73a" @click="buyClick(1)">立即购买</button>-->
    </div>

    <div class="Details_tcbg" style="z-index: 101" v-if="addToCartModelShow">
      <div class="PopBg" @click="switchAddToCartModelShow(false)"></div>
      <div class="Details_tc" style="z-index: 101">
        <i class="iconfont icon-guanbi1" @click="switchAddToCartModelShow(false)"></i>
        <div class="Details_tc_img">
          <img :src="$config.website + '/test.php?sign=' + 1 + '&image=' + goodsInfo.goods_image" alt="">
        </div>
        <div class="Details_tc_price">
          <span style="margin-bottom: 10px">￥{{memberInfo.level == '1'?goodsInfo.partner_price:  goodsInfo.goods_price | discount(goodsInfo.groupbuy_rebate)}}</span>
          <p style="margin-top: 0.4rem">库存：{{goodsInfo.goods_storage}}</p>
        </div>
        <div class="Details_tc_classification">
          <p class="Details_tc_classification_p">数量
            <span class="Details_tc_classification_jiajian" style=";background: #fff">
              <i class="iconfont icon-jiahao" @click="addNum" style="float: right;background: #fff;margin-left: 10px"></i>
              <span style="float: right;margin-top: -5px">{{buyNum}}</span>
              <i class="iconfont icon-jianhao" @click="reduceNum" style="float: right;background: #fff;margin-right: 10px"></i>
            </span>
          </p>
        </div>
        <div class="Details_tc_btn" @click="selectGoodsAttrConfirm">
          确定
        </div>
      </div>
    </div>

    <!--分享弹窗-->
    <div class="Details_tcbg " style="z-index: 11"  v-show="share == true">
      <div class="codeimg" style="margin-top: 237px;z-index: 999;position: relative;width: 60%;margin-left: 20%;background: #fff;border-radius: 5%;overflow: hidden;">
        <img :src="goodsInfo.image_list[0]" width="100%"/>
        <span style="float: left;    position: absolute;width: 50%;word-wrap: break-word;border: solid 5px #fff;font-size: 13px;height: 60px;overflow: hidden;">{{goodsInfo.goods_name}}</span>
        <p style="position:absolute;color: #ae2a1b;float: left;   width: 50%;word-wrap: break-word;border: solid 5px #fff;font-size: 13px;margin-top: 60px">{{goodsInfo.goods_price}}</p>
        <qriously :value="qrcodeStr" :size="160" style="text-align: center;position: relative;
    right: -25%;" id="qriousImg"/>
      </div>

      <div class="Details_tc2">
        <p class="Details_tc2_p1">分享至</p>
        <ul>
          <li>
            <i class="iconfont icon-weixinx-" @click="openShareWindow(1)"></i>
            <p class="Details_tc2_p3">微信好友</p>
          </li>
          <li>
            <i class="iconfont icon-qqhaoyou" @click="openShareWindow(2)"></i>
            <p class="Details_tc2_p3">QQ好友</p>
          </li>
          <!--<li>-->
            <!--<i class="iconfont icon-QQkongjian"></i>-->
            <!--<p class="Details_tc2_p3">QQ空间</p>-->
          <!--</li>-->
          <!--<li>-->
            <!--<i class="iconfont icon-weibo"></i>-->
            <!--<p class="Details_tc2_p3">微博</p>-->
          <!--</li>-->
        </ul>
        <p class="Details_tc2_p2" @click="openShare">取消</p>
      </div>
    </div>
    <div class="maintenance_bg" v-show="window == true">
      <div class="maintenance_tc" style="height: 9.8rem">
        <p class="maintenance_tc_1">选择分享到何处<i class="iconfont icon-guanbi" @click="openShareWindow(1)"></i></p>
        <div class="maintenance_tc_2">
          <ul>
            <li @click="selectWhere(1)">
              <i class="iconfont icon-xuanzhong1" style="float: left;" :class="{'on': shareWhere == 1}"></i>
              <p class="maintenance_tc_2_p1" style="line-height: 2rem;">分享到朋友圈</p>
            </li>
            <li @click="selectWhere(2)">
              <i class="iconfont icon-xuanzhong1" style="float: left;" :class="{'on': shareWhere == 2}"></i>
              <p class="maintenance_tc_2_p1" style="line-height: 2rem;">分享给朋友</p>
            </li>
          </ul>
        </div>
        <p class="Details_tc2_p2" style="text-align: center;" @click="shareWx">确认</p>
      </div>
    </div>
    <!--选择商品属性弹窗End-->
    <!--新品弹窗-->
    <div v-if="newGoodsNoticeModelShow">
      <div class="PopBg"></div>
      <div class="new_product">
        <h3>{{newGoodsNotice}}</h3>
        <div class="new_img">
          <img :src="$config.website + $config.goodsImgSrc + newGoodsInfo.goods_image">
          <p class="tit_new">{{newGoodsInfo.goods_name}}</p>
          <p class="price">￥{{newGoodsInfo.goods_price | discount(newGoodsInfo.groupbuy_rebate)}}</p>
        </div>
        <div class="new_btn"><a href="javascript:void(0)" @click="gotoGoodsDetail(newGoodsInfo.goods_commonid)">点击查看</a><a href="javascript:void(0)" @click="cancleNewGoods" class="bor_c3ffbc  close2">关闭</a>
        </div>
      </div>
    </div>

    <div v-show="arriveNoticeModelShow">
      <div class="PopBg"></div>
      <div class="new_product" style="width: 14rem; left: 1rem; top: 7rem">
        <h3>设置到货提醒</h3>
        <div style="padding: 10px">
          <p class="rem_cont">当商品有库存时系统将第一时间通知您！</p>
          <div class="rem_ipt"><label>手机号码<input type="tel" v-model="arriveNoticeTel"></label></div>
        </div>
        <div class="new_btn">
          <a href="javascript:void(0)" @click="switchArriveModelShow(false)">取消</a><a href="javascript:void(0)" @click="addArriveNotice" class="bor_c3ffbc  close2">确定</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {Swipe, SwipeItem} from 'mint-ui'
  import {mapModules, mapRules} from 'vuet'
  import Vue from 'vue'
  import VueQriously from '../../components/qrcode/vue-qriously.js'
  Vue.use(VueQriously)

  export default{
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.from = from.name
        vm.toFullPath = to.fullPath
      })
    },
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({once: 'memberInfo'})
    ],
    data() {
      return {
        from: null,
        toFullPath: null,
        goodsCommonid: this.$route.params.id,
        goodsId: '',
        storageRequested: false, // 库存是否请求过
        goodsInfo: {goods_add_num: 1},
        newGoodsNotice: '',
        newGoodsInfo: {}, // 新品
        goodsAttribute: {}, // 商品规格
        goodsComment: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        goodsCommentCount: 0,
        addToCartModelShow: false,
        newGoodsNoticeModelShow: false,
        selectedAttributeIdList: [],
        buyNum: 0,
        buyActionType: 0, // 购买操作类型：0加入购物车，1直接购买
        timeRemain: {days: 0, hours: 0, minutes: 0, seconds: 0},
        countdownInterval: null,
        arriveNoticeModelShow: false, // 到货通知模态框
        arriveNoticeTel: '',
        sign: 0,
        share: false,
        window: false,
        shareType: 0, // 分享类型 1：QQ 2：微信
        shareWhere: 0 // 分享到何处 1：朋友圈 2：朋友
      }
    },
    components: {
      'mtSwipe': Swipe,
      'mtSwipeItem': SwipeItem
    },
    mounted() {
      this.getGoodsInfo(this.goodsCommonid)
      this.getGoodsComment(this.goodsCommonid, 1, 1)
      this.getGoodsAttributeList(this.goodsCommonid)
      console.log(window.location.href + '?fkmid=' + this.memberInfo.member_id)
    },
    beforeDestroy() {
      clearInterval(this.countdownInterval)
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'init',
      buyNum: function (newValue) {
//        if (!newValue && newValue == '') {
//          return
//        }
//        let packNum = this.packNum // 购买基数
//        let mul = parseInt(parseInt(newValue) / packNum) // 倍数
//        let remain = parseInt(newValue) % packNum // 余数
//        if (remain != 0) {
//          this.buyNum = packNum * (mul + 1)
//        }
      }
    },
    computed: {
      // 购买基数
      packNum: function () {
        return parseInt(this.goodsInfo.goods_add_num || 1)
      },
      qrcodeStr: function () {
        return window.location.href + '?fkmid=' + this.memberInfo.member_id
      }
    },
    methods: {
      gotoService() {
        this.$router.push({name: 'login-service'})
      },
      openShareWindow(type) {
        this.shareType = type
        if (type == 1) {
          this.window = !this.window
        } else {
          let url = window.location.href + '?fkmid=' + this.memberInfo.member_id
          var qq = window.api.require('QQPlus')
          qq.shareNews({
            url: url,
            title: this.goodsInfo.goods_name,
            description: '淘只二手表',
            imgUrl: this.goodsInfo.image_list[0],
            type: 'QFriend'
          }, function(ret, err) {
            if (ret.status) {
              console.log(ret.status)
            } else {
              console.log(err.code)
            }
          })
        }
      },
      openShare() {
        if (this.$utils.getDeviceType() != 'APICloud') {
          this.$toast('请在app中执行该操作')
          return
        }
        this.share = !this.share
      },
      selectWhere(where) {
        this.shareWhere = where
      },
      shareWx() {
        console.log(this.goodsInfo.image_list[0])
        let imageUrl = 'widget://image/logo-img.png'
        let url = window.location.href + '?fkmid=' + this.memberInfo.member_id
        if (this.shareType == 1) {
          let wx = window.api.require('wx')
          if (this.shareWhere == 1) {
            wx.shareWebpage({
              apiKey: 'wxfb4267fcea32d773',
              scene: 'timeline',
              title: this.goodsInfo.goods_name,
              description: '淘只二手表',
              thumb: imageUrl,
              contentUrl: url
            }, function(ret, err) {
              if (ret.status) {
                console.log(ret)
              } else {
                console.log(err)
              }
            })
          } else {
            wx.shareWebpage({
              apiKey: 'wxfb4267fcea32d773',
              scene: 'session',
              title: this.goodsInfo.goods_name,
              description: '淘只二手表',
              thumb: imageUrl,
              contentUrl: url
            }, function(ret, err) {
              if (ret.status) {
                console.log(ret)
              } else {
                console.log(err)
              }
            })
          }
        } else {
          this.$toast('请选择要分享到何处')
        }
        this.share = false
        this.window = false
      },
      changeType(type) {
        this.sign = type
      },
      addViewCount(goodsId) {
        this.$request.addGoodsView(goodsId).then(data => {}).catch(e => {})
      },
      goUpgradeVip() {
        this.$router.push({name: 'upgrade-vip'})
      },
      goGoodsList() {
        this.$router.push({name: 'goods-list', params: {brand_id: this.goodsInfo.brand.brand_id}})
      },
      back() {
        console.log(this.from)
        if (this.from) {
          this.$router.go(-1)
        } else {
          this.$router.push({name: 'home'})
        }
      },
      init() {
        console.log('init')
        this.initData()
        this.getGoodsInfo(this.goodsCommonid)
        this.getGoodsComment(this.goodsCommonid, 1, 1)
        this.getGoodsAttributeList(this.goodsCommonid)
      },
      initData() {
        this.goodsCommonid = this.$route.params.id
        this.goodsId = ''
        this.goodsInfo = {}
        this.newGoodsInfo = {} // 新品
        this.goodsAttribute = {} // 商品规格
        this.goodsComment = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.addToCartModelShow = false
        this.newGoodsNoticeModelShow = false
        this.selectedAttributeIdList = []
        this.buyNum = 0
        this.buyActionType = 0 // 购买操作类型：0加入购物车，1直接购买
        this.timeRemain = {days: 0, hours: 0, minutes: 0, seconds: 0}
        this.countdownInterval = null
      },
      switchArriveModelShow(boolValue) {
        this.arriveNoticeModelShow = boolValue
      },
      addArriveNotice() {
        if (!this.$validator.phone(this.arriveNoticeTel)) {
          this.$toast('请输入正确的手机号')
          return
        }
        this.switchArriveModelShow(false)
        this.$request.addArriveNotice(this.goodsId, this.arriveNoticeTel).then(data => {
          this.$toast('设置到货通知成功')
        }).catch(e => {
          this.$toast('设置到货通知失败:' + e.msg)
        })
      },
      handleNumChange() {
        console.log('blur..')
        if (this.buyNum == '' || this.buyNum == 0) {
          this.buyNum = this.packNum
          return
        }
        let mul = parseInt(parseInt(this.buyNum) / this.packNum) // 倍数
        let remain = parseInt(this.buyNum) % this.packNum // 余数
        if (remain != 0) {
          this.buyNum = this.packNum * (mul + 1)
        }
      },
      handleSwipeChange(index) {
        let imgSwipeList = document.getElementsByClassName('swipe-img')
        let swiperContainer = document.getElementsByClassName('swiper-container')[0]
        this.$utils.imgLoaded(imgSwipeList[index].src).then(img => { // 图片加载完成后改变轮播容器的高度
          swiperContainer.style.cssText = 'height: ' + img.height / img.width * document.documentElement.clientWidth + 'px'
        }).catch(e => {
          console.error('商品轮播图' + index + '加载失败')
        })
      },
      getGoodsInfo(id) {
        this.$request.getGoodsInfo(id).then(data => {
          this.newGoodsNotice = data.new_note
          this.goodsInfo = data
//          this.goodsInfo.goods_add_num = 6 // 测试
          this.buyNum = this.packNum
          if (data.image_list && data.image_list.length > 0) { // 有商品轮播图
            let url = data.image_list[0]
            this.$utils.imgLoaded(url).then(img => { // 图片加载完成后改变轮播容器的高度
              let swiperContainer = document.getElementsByClassName('swiper-container')[0]
              swiperContainer.style.cssText = 'height: ' + img.height / img.width * document.documentElement.clientWidth + 'px'
              console.log('imgWH', img.width, img.height)
            }).catch(e => {
              console.error('商品轮播图加载失败')
            })
          }
          if (data.groupbuy_info) {
            this.getTimeRemain(data.groupbuy_info.end_time)
            clearInterval(this.countdownInterval)
            this.countdownInterval = setInterval(() => {
              this.getTimeRemain(data.groupbuy_info.end_time)
            }, 1000)
          }
          let title = data.goods_name
          if (data.groupbuy_info && data.groupbuy_info.groupbuy_name) {
            title = data.groupbuy_info.groupbuy_name
          }
          let imgSrc = data.goods_image
          console.log('微信自己添加的参数', this.$utils.getQueryString('from'), this.$utils.getQueryString('isappinstalled'))
          console.log('share2', window.location.href, title, imgSrc)
          this.$native.weixinShare(window.location.href, title, imgSrc)
        }).catch(e => {
          this.$toast('获取商品详情失败:' + e.msg)
        })
      },
      getGoodsComment(id, page, pageSize) {
        this.goodsComment.loading = true
        this.$request.getGoodsCommentList(id, page, pageSize).then(data => {
          if (this.$utils.isEmptyObject(data)) {
            return
          }
          if (data.data.length < this.goodsComment.pageSize) {
            this.goodsComment.allLoaded = true
          }
          this.goodsCommentCount = data.count
          this.goodsComment.data = [...this.goodsComment, ...data.data]
        }).finally(() => {
          this.goodsComment.requested = true
          this.goodsComment.loading = false
        })
      },
      getGoodsAttributeList(id) {
        this.$request.getGoodsAttributeList(id).then(data => {
          this.goodsAttribute = data
          this.goodsId = data.goods_info.goods_id
          this.addViewCount(this.goodsId)
          for (let i = 0; i < this.goodsAttribute.goods_info.goods_spec.length; i++) {
            this.selectedAttributeIdList[i] = this.goodsAttribute.goods_info.goods_spec[i].id
          }
        })
      },
      async selectAttributeClick(id, index) {
        this.$set(this.selectedAttributeIdList, index, id)
        try {
          let goodsInfo = await this.$request.getGoodsAttributeList(this.goodsInfo.goods_commonid, this.selectedAttributeIdList)
          if (goodsInfo.goods_info.goods_serial) {
            this.goodsInfo.goods_image = goodsInfo.goods_info.goods_image
            this.goodsInfo.goods_price = goodsInfo.goods_info.goods_price
            this.goodsId = goodsInfo.goods_info.goods_id
          }
        } catch (e) {
          this.$toast('选择规格失败:' + e.msg)
        }
      },
      gotoCommentList() {
        this.$router.push({
          name: 'comment-list',
          params: {id: this.goodsCommonid},
          query: {commonid: this.goodsCommonid}
        })
      },
      switchCollect() {
        if (this.goodsInfo.fav_state == 0) { // 未收藏过
          this.addCollect()
        } else {
          this.delCollect()
        }
      },
      addCollect() {
        this.$request.addCollect(this.goodsInfo.goods_commonid).then(data => {
          this.$toast('添加收藏成功')
          this.goodsInfo.fav_state = 1
        }).catch(e => {
          this.$toast('添加收藏失败:' + e.msg)
        })
      },
      delCollect() {
        this.$request.delCollect(this.goodsInfo.goods_commonid).then(data => {
          this.$toast('取消收藏成功')
          this.goodsInfo.fav_state = 0
        }).catch(e => {
          this.$toast('取消收藏失败:' + e.msg)
        })
      },
      addNum() {
        this.buyNum = parseInt(this.buyNum)
        if ((this.buyNum + this.packNum) >= parseInt(this.goodsInfo.goods_storage)) {
          this.$toast('超过商品库存数量了~')
          return
        }
        if (this.goodsInfo.groupbuy_info && this.goodsInfo.groupbuy_info.upper_limit != '0' && (this.buyNum + this.packNum) > parseInt(this.goodsInfo.groupbuy_info.upper_limit)) {
          this.$toast('超过限购数量了~')
          return
        }
        this.buyNum += this.packNum
      },
      reduceNum() {
        this.buyNum = parseInt(this.buyNum)
        if (this.buyNum <= this.packNum) {
          return
        }
        this.buyNum -= this.packNum
      },
      selectGoodsAttr() {
        return new Promise((resolve, reject) => {
          for (let i = 0; i < this.goodsAttribute.attri_list.length; i++) {
            if (!this.selectedAttributeIdList[i]) {
              reject({msg: '请选择 ' + this.goodsAttribute.attri_list[i].name})
            }
          }
          this.$request.getGoodsAttributeList(this.goodsInfo.goods_commonid, this.selectedAttributeIdList).then(goodsInfo => {
            if (!goodsInfo.goods_info.goods_id) {
              reject({msg: '该规格商品不存在'})
            }
            if (!goodsInfo.goods_info.goods_storage || goodsInfo.goods_info.goods_storage == '0') {
              reject({msg: '商品库存不足！'})
            }
            resolve({goodsInfo: goodsInfo, storage: goodsInfo.goods_info.goods_storage})
          }).catch(e => {
            reject({msg: '获取该规格商品失败'})
          })
        })
      },
      buyClick(buyActionType) {
        if (!this.memberInfo.member_mobile) {
          this.$messageBox.alert('请先绑定手机号码！', '提示').then(action => {
            this.$router.push({name: 'modify-mobilenext'})
          })
          return
        }
        this.buyActionType = buyActionType
        if (this.goodsInfo.new_id != '0') { // 有新品
          this.$request.getGoodsInfo(this.goodsInfo.new_id).then(data => {
            this.newGoodsInfo = data
            this.switchNewGoodsNoticeModelShow(true)
          }).catch(e => {
            this.$toast('获取新品详情失败:' + e.msg)
          })
        } else {
          this.addToCartModelShow = true
        }
      },
      async selectGoodsAttrConfirm() {
        try {
          this.buyNum = parseInt(this.buyNum)
          let goodsInfo = await this.selectGoodsAttr()
          if (goodsInfo.goods_storage < this.buyNum) {
            this.$toast('当前库存不足, 请注意购买数量')
            return
          }
          if (this.goodsInfo.groupbuy_info && this.goodsInfo.groupbuy_info.upper_limit != '0' && this.buyNum > parseInt(this.goodsInfo.groupbuy_info.upper_limit)) {
            this.$toast('超过限购数量了~')
            return
          }
          if (this.buyNum % this.packNum != 0) {
            this.$toast('该商品需按' + this.packNum + '的整数倍购买')
            return
          }

          let cartId = await this.$request.addGoodsToCart(goodsInfo.goodsInfo.goods_info.goods_id, this.buyNum)
          if (this.buyActionType === 0) { // 只是加入购物车
            this.addToCartModelShow = false
            this.$toast('加入购物车成功')
          } else if (this.buyActionType === 1) { // 立即购买：加入购物车-> 订单确认页
//            this.selectedCartIdList = [cartId]
            this.$router.push({name: 'order-confirm', query: {cart: cartId}})
          }
        } catch (e) {
          console.error('加入购物车失败', e)
          this.$toast('加入购物车失败:' + e.msg)
        }
      },
      cancleNewGoods() {
        this.switchNewGoodsNoticeModelShow(false)
        this.switchAddToCartModelShow(true)
      },
      switchAddToCartModelShow(boolValue) {
        this.addToCartModelShow = boolValue
      },
      switchNewGoodsNoticeModelShow(boolValue) {
        this.newGoodsNoticeModelShow = boolValue
      },
      gotoGoodsDetail(goodsCommonid) {
        this.$router.push({name: 'goods-detail', params: {id: goodsCommonid}})
      },
      // 去除iframe字符串的宽高
      resetIframWH(html) {
        html = html.replace(/height=\d+/g, '')
        html = html.replace(/width=\d+/g, 'width="100%"')
        return html
      },
      getTimeRemain(endTimeTamp) {
        if (endTimeTamp) {
          let currentTime = new Date()
          let endTime = new Date()
          endTime.setTime(endTimeTamp * 1000)
          this.timeRemain = this.$utils.timeDif(currentTime, endTime)
        }
      },
      goCart() {
        this.$router.push({name: 'cart-list'})
      }
    }
  }
</script>

<style>
  .DetailsEntry:before {
    content: none;
  }

  .bg_d3d2d2 {
    background-color: #d3d2d2;
  }

  .collected {
    color: #45a73a;
  }
  .bg_e3c14{background-color: #E3C143;}
  /*商品参数*/
  .params-cont{background-color: #fff;padding: 10px;}
  .params-cont>h4{font-size: 15px;line-height: 1.5rem;color: #333;}
  .param-line{display: flex;padding-bottom: 6px;}
  .param-line .line-head{flex-shrink: 0;width: 3rem;color: #333;}
  .param-line .line-cont{word-break: break-word;color: #666;}

  .zaishou{position: relative;border-top: 1px solid #F7F7F7;padding:7px 10px !important;}
  .zaishou .zaishou_img{display: inline-block;height: 2.5rem;vertical-align: middle;margin-right: 0.25rem;}
  .zaishou_img>img{height: 100%;}
  .zaishou .dszt{display: inline-block;vertical-align: middle;}
  .zaishou .icon-youjiantou-copy{position: absolute;top:50%;transform: translateY(-50%);right: 15px;}
  /**/
  .calc-btn{display: inline-block;height: 1.1rem;width: 2rem;text-align: center;border:1px solid #999;border-radius: 5px;color: #333;font-size: 20px;line-height: 1rem;vertical-align: middle;}
  .add-btn{border-color: rgba(227, 193, 67, 1);color: rgba(227, 193, 67, 1);}
  .dis-btn{background-color: #ddd;color: #888;border-color: #999;}
  .bodys_id img{width:100%;height:100%;}
  .icon-gouwuche before{
    color: #fff!important;
  }
  .on {
    color: #f5d607 !important;
  }
  #qriousImg img{
    width: 40%;
    position: relative;
  }
  #qriousImg p{
    width: 50%!important;
    right: -25%;
    word-wrap: break-word;
  }
  #qriousImg span{
    width: 50%!important;
    word-wrap: break-word;
    font-size: 15px;
  }
</style>
